<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 元素的定位方式 */
			/* 1.文档流定位（默认）  静态定位 从左向右，从上向下，块级元素独占一行，内联元素不独占一行将页面元素进行排序 */
			/* 2.相对定位 relative 相对自身所在位置设置坐标  并且原来自身所在位置所占空间不会被回收*/
			/*   相对定位并没有脱离文档流 */
			p{
				width: 200px;
				height: 200px;
				background-color: red;
				
				position : static;/* 将p标签的定位方式设置为文档流定位 */
				
				position: relative;/* 将p标签的定位方式设置为相对定位  */
				left: 100px;
				top: 100px;
			}
			
		</style>
	</head>
	<body>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<p></p>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
	</body>
</html>
